<!--该画面是：报价单维护画面 -->
<template>
  <el-dialog
    id="backQuotaMaintenance"
    v-loading="dataLoading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.7)"
    :title="title"
    :visible.sync="openSheet"
    width="1200px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :before-close="cancel"
  >
    <!-- 项目计划信息 -->
    <projectplanbase-info :project-plan-base-information="projectPlanBaseInformation" />
    <!-- 项目计划信息 -->

    <div class="DescriptionTitle">{{ $t('quotaMaintainTitle') }}</div>

    <el-table ref="table1" v-loading="loading" :data="quoteList" border :style="{ height: tableHeightStyle }" :default-sort="{ prop: 'quote_date', order: 'ascending' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" />
      <el-table-column :label="$t('quoteNo')" prop="quote_no" width="100" />
      <el-table-column :label="$t('quoteType')" prop="quote_type_desc" width="90" />
      <el-table-column :label="$t('quoteContent')" prop="quote_content" width="320" show-tooltip-when-overflow />
      <el-table-column :label="$t('quoteDate')" prop="quote_date" sortable align="center" width="110" />
      <el-table-column :label="$t('quoteAmount')" prop="quote_amount" align="right" width="120" />
      <el-table-column :label="$t('quoteCurrency')" prop="quote_curr" align="right" width="120" />
      <el-table-column :label="$t('standardCurrency')" prop="standard_curr" align="right" width="120" />
      <el-table-column :label="$t('rate')" prop="exchange_rate" align="right" width="120" />
      <el-table-column :label="$t('standardAmount')" prop="rate_amount" align="right" width="120" />
      <el-table-column :label="$t('quoteDays')" prop="quote_days" align="right" width="120" />
      <el-table-column :label="$t('receiveDate')" prop="receive_date" align="center" width="110" />
      <el-table-column :label="$t('quoteNote')" prop="note" min-width="220" show-tooltip-when-overflow />
      <el-table-column :label="$t('createdUser')" prop="created" width="100" />
      <el-table-column :label="$t('createdDate')" prop="created_date" width="160" />
      <el-table-column :label="$t('createdProgram')" prop="created_program" width="200" show-overflow-tooltip />
      <el-table-column :label="$t('updatedUser')" prop="updated" width="100" />
      <el-table-column :label="$t('updatedDate')" prop="updated_date" width="160" />
      <el-table-column :label="$t('updatedProgram')" prop="updated_program" width="200" show-overflow-tooltip />
      <el-table-column :label="$t('operate')" align="center" width="180" class-name="fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="updateQuota(scope.row)">{{ $t('modifyBtn') }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteQuota(scope.row)">{{ $t('deleteBtn') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: space-between;">
      <div style="margin-top: 5px;">
        <el-button size="medium" type="text" icon="el-icon-plus" @click="createQuota">{{ $t('addBtn') }}</el-button>
        <el-button size="medium" :disabled="!canBatchDelete" type="text" icon="el-icon-delete" @click="handleBatchDelete">{{ $t('batchDeleteBtn') }}</el-button>
      </div>
      <div>
        <pagination
          v-show="detailtotal > 0"
          :pager-count="5"
          :total="detailtotal"
          :page.sync="detailParams.page"
          :limit.sync="detailParams.page_size"
          @pagination="getQuoteList"
        />
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>

    <el-backtop target="#backQuotaMaintenance" />

    <projectquota-maintain-sheet ref="projectquotaMaintainSheet" @refreshList="getQuoteList" />
  </el-dialog>
</template>

<script>
import { getProjectQutaListApi, deleteProjectQutaApi, BatchdeleteProjectQuotaApi } from '@/views/project/projectquota/api/projectquota.api';
import projectplanbaseInfo from '@/views/projectbase/projectplanbase/components/projectplanbase-info.vue';
import ProjectquotaMaintainSheet from './projectquota-maintain-sheet.vue';

export default {
  components: { projectplanbaseInfo, ProjectquotaMaintainSheet },
  data() {
    return {
      title: this.$t('quotaMaintainTitle'),
      dataLoading: false,
      loading: false,
      openSheet: false,
      canBatchDelete: false,
      quoteList: [],
      multipleSelection: [],
      detailtotal: 0,
      detailParams: {
        projectPlanFK: undefined,
        page: 1,
        page_size: 10
      },
      options: [],
      projectPlanId: undefined,
      projectPlanBaseInformation: {},
      tableHeightStyle: '',
      originalTableHeight: ''
    }
  },
  methods: {
    async openSheetDialog(data) {
      this.dataLoading = true;
      this.reset();
      this.projectPlanBaseInformation = data
      this.projectPlanId = data.id;
      this.getQuoteList();
      this.openSheet = !this.openSheet;
      this.dataLoading = false;
    },
    // 获取报价单数据
    async getQuoteList() {
      this.detailParams.projectPlanFK = this.projectPlanId
      this.loading = true
      var resp = await getProjectQutaListApi({ ...this.detailParams })
      if (resp.success) {
        this.quoteList = resp.data.results
        this.detailtotal = resp.data.count
      } else {
        this.quoteList = []
      }
      this.updateTableHeight();
      this.loading = false
    },
    updateTableHeight() {
      this.tableHeightStyle = ''
      // 确保表格数据渲染完成
      this.$nextTick(() => {
        setTimeout(() => {
          // 再次确保 DOM 已经更新
          this.tableHeightStyle = this.$refs.table1.$el.scrollHeight + 'px';
        }, 100); // 增加 100ms 的延迟
      });
    },
    // 多选操作
    handleSelectionChange(value) {
      this.multipleSelection = value;
      // 只有勾选了数据，且状态为初始时，才允许批量删除
      if (value.length > 0) {
        this.canBatchDelete = true
      } else {
        this.canBatchDelete = false
      }
    },
    cancel() {
      this.openSheet = !this.openSheet;
      this.$emit('refreshList');
      this.reset()
    },
    reset() {
      this.detailtotal = 0
      this.detailParams = {
        projectPlanFK: undefined,
        page: 1,
        page_size: 10
      };
      this.quoteList = []
    },
    // 新增功能
    createQuota() {
      this.$refs.projectquotaMaintainSheet.openSheetDialog({ ...this.projectPlanBaseInformation })
    },
    // 修改按钮
    updateQuota(row) {
      this.$refs.projectquotaMaintainSheet.openSheetDialog(this.projectPlanBaseInformation, row)
    },
    // 删除按钮
    async deleteQuota(row) {
      if (await this.ConfirmMessageBox(this.$t('quotaMaintainTitle'), this.$t('dataDeleteConfirm', { title: this.$t('quoteNo'), value: row.quote_no }), 'warning') === 'cancel') {
        return
      }
      const resp = await deleteProjectQutaApi(row.id);
      if (resp.success) {
        this.targaMessage(this.$t('deleteSuccess', {
          title: this.$t('quoteNo'),
          value: row.quote_no
        }));
        this.getQuoteList();
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    // 批量删除功能
    async handleBatchDelete() {
      if (await this.ConfirmMessageBox(this.$t('quotaMaintainTitle'), this.$t('dataBatchDeleteConfirm'), 'warning') === 'cancel') {
        return
      }
      const resp = await BatchdeleteProjectQuotaApi({ ids: this.multipleSelection.map(item => item.id) })
      if (resp.success) {
        this.targaMessage(this.$t('quotaBatchDeleteSuccess'));
        this.getQuoteList();
      } else {
        this.targaMessageBox(this, resp.msg);
        return;
      }
    }
  }
};
</script>

  <style scoped>
  @import "~@/views/projectbase/projectcss/project.css";
  </style>
